<template>
  <div class="user-profile-container">
    <el-card class="profile-card" shadow="hover">
      <!-- 用户信息 -->
      <div class="user-header">
        <el-avatar :size="80" :src="user.avatar" />
        <div class="user-text">
          <h2>{{ user.name }}</h2>
          <p>ID: {{ user.id }}</p>
        </div>
      </div>

      <!-- 功能菜单 -->
      <el-menu
        default-active="1"
        class="profile-menu"
        @select="handleMenuSelect"
        active-text-color="#409EFF"
      >
        <el-menu-item v-for="(item, index) in menuItems" :key="index" :index="String(index + 1)">
          <div class="menu-item-content">
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.title }}</span>
            <el-badge v-if="item.badge" :value="item.badge" class="menu-badge" />
          </div>
        </el-menu-item>

        <!-- 设置开关项 -->
        <el-menu-item class="toggle-item">
          <div class="menu-item-content">
            <el-icon>
              <Location />
            </el-icon>
            <span>定位权限</span>
            <el-switch v-model="locationEnabled" @change="handleLocationSwitch" />
          </div>
        </el-menu-item>
      </el-menu>

      <!-- 退出登录按钮 -->
      <div class="logout-section">
        <el-button type="danger" class="logout-btn" @click="handleLogout">
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-button>
      </div>
    </el-card>
    
    <!-- 弹窗组件 -->
    <LocationDialog
      v-model="showLocationDialog"
      @allow="handleAllowLocation"
      @deny="handleDenyLocation"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { User, CreditCard, Monitor, Setting, Location, Message, SwitchButton } from '@element-plus/icons-vue'
import LocationDialog from './LocationDialog.vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

// 用户信息
const user = ref({
  avatar: 'https://randomuser.me/api/portraits/men/44.jpg', // 示例头像链接
  name: '陈明远',
  id: 'chen_my2024'
})

// 菜单项
const menuItems = [
  { title: '个人信息管理', icon: User },
  { title: '银行卡管理', icon: CreditCard },
  { title: '消息中心', icon: Message, badge: 3 }, // 添加消息中心，显示未读消息数
  { title: '开发人员信息', icon: Monitor },
  { title: '设置', icon: Setting }
]

// 开关状态
const locationEnabled = ref(false)
const showLocationDialog = ref(false)

const router = useRouter()

// 菜单点击事件
const handleMenuSelect = (index) => {
  const selected = menuItems[index - 1]
  if (selected) {
    switch (selected.title) {
      case '个人信息管理':
        router.push('/profile-detail')
        break
      case '银行卡管理':
        router.push('/bank-manage')
        break
      case '消息中心':
        router.push('/message-center')
        break
      default:
  console.log('Selected Menu:', selected.title)
    }
  }
}

function handleLocationSwitch(val) {
  if (val) {
    showLocationDialog.value = true
  }
}

function handleAllowLocation() {
  locationEnabled.value = true
  // 这里可以添加获取定位服务的逻辑
}

function handleDenyLocation() {
  locationEnabled.value = false
}

// 退出登录
async function handleLogout() {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 清除登录状态
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('username')
    
    // 跳转到登录页
    router.push('/login')
  } catch {
    // 用户取消退出
  }
}
</script>

<style scoped>
.user-profile-container {
  display: flex;
  justify-content: center;
  padding: 20px 20px 0 20px; /* 去掉底部padding，适应底部导航 */
  background: linear-gradient(to right bottom, #f5f7fa, #c3cfe2);
  min-height: calc(100vh - 80px); /* 减去底部导航高度 */
  font-family: 'Segoe UI', sans-serif;
}

.profile-card {
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-header .user-text {
  margin-left: 16px;
  text-align: left; /* 确保文本左对齐 */
}

.user-header h2 {
  margin: 0;
  font-size: 1.4em;
  color: #333;
}

.user-header p {
  margin: 4px 0 0;
  font-size: 0.9em;
  color: #888;
}

.profile-menu {
  border: none;
  background: transparent;
}

.profile-menu .el-menu-item {
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  height: auto;
  padding: 12px 20px; /* 增加内边距，使布局更美观 */
  font-size: 1em;
}

.menu-item-content {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left; /* 确保文本左对齐 */
  position: relative;
}

.menu-item-content .el-icon {
  margin-right: 10px;
  color: #666;
  font-size: 18px;
}

.menu-item-content span {
  flex: 1; /* 使文本占据剩余空间 */
}

.menu-badge {
  margin-left: auto;
}

.toggle-item .menu-item-content {
  justify-content: space-between; /* 开关项左右对齐 */
}

.logout-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.logout-btn {
  width: 100%;
  height: 44px;
  font-size: 1em;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 移动端优化 */
@media (max-width: 600px) {
  .user-profile-container {
    padding: 16px 12px 0 12px;
  }
  
  .profile-card {
    border-radius: 12px;
  }
  
  .user-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .user-header .user-text {
    margin: 12px 0 0 0;
    text-align: center;
  }

  .user-header h2 {
    font-size: 1.3em;
  }
  
  .profile-menu .el-menu-item {
    padding: 10px 16px;
    font-size: 0.95em;
  }
  
  .menu-item-content .el-icon {
    font-size: 16px;
  }
  
  .logout-btn {
    height: 40px;
    font-size: 0.95em;
  }
}

@media (max-width: 375px) {
  .user-profile-container {
    padding: 12px 8px 0 8px;
  }
  
  .profile-menu .el-menu-item {
    padding: 8px 12px;
    font-size: 0.9em;
  }

  .user-header h2 {
    font-size: 1.2em;
  }
}
</style>